<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas width="800" height="400"></canvas>
</body>
<script src="../lib/gl-renderer.js"></script>
<script>
  const vertex = `
  attribute vec2 a_vertexPosition;
  attribute vec2 uv;
  varying vec2 vUv;

  void main() {
    gl_PointSize = 1.0;
    vUv = uv;
    gl_Position = vec4(a_vertexPosition, 1, 1);
  }
  `
  const fragment = `
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vUv;
    uniform float uTime;
    float random (vec2 st) {
      return fract(sin(dot(st.xy, 
        vec2(12.9898, 78.233))) *
        43758.543123);
    }
    void main()
    {
      vec2 st = vUv * vec2(100.0, 50.0);
      st.x -= (1.0 + 10.0 * random(vec2(floor(st.y)))) * uTime;

      // 整数
      vec2 ipos = floor(st);
      // （0，1）
      vec2 fpos = fract(st);

      vec3 color = vec3(step(random(ipos), 0.7));
      // step(0.2, fpos.y) 固定 fpos.y > 0.2时，为1
      color *= step(0.2, fpos.y);
      gl_FragColor = vec4(color, 1.0);
    }
  `;
  const canvas = document.querySelector('canvas')
  const renderer = new GlRenderer(canvas)
  const program = renderer.compileSync(fragment, vertex)
  renderer.useProgram(program)
  
  renderer.setMeshData([{
    positions: [
      [-1, -1],
      [-1, 1],
      [1, 1],
      [1, -1]
    ],
    attributes: {
      uv: [
       [0, 0], [0, 1], [1, 1], [1, 0],
      ]
    },
    cells: [[0, 1, 2], [2, 0, 3]],
  }])

  let startTime = performance.now()

  function update(t) {
    const uTime = 4 * t / 1000
    renderer.uniforms.uTime = uTime
    requestAnimationFrame(update)
  }

  renderer.uniforms.uTime = 0.0
  
  renderer.render()

  requestAnimationFrame(update)
</script>
</html>